<template>
<view class="consult-main page-view">
	<view class="top-container">
		<view class="reason-wrap">
			<view class="label">就诊原因</view>
			<view class="input-wrap">
				<textarea class="reason-input"
				placeholder="在此处输入咨询" placeholder-class="reason-input-placeholder"
				v-model="reason" maxlength="255"></textarea>
				<view class="word-count">{{ reason.length }}/255</view>
			</view>
			
			<view class="image-upload-wrap">
				<view class="upload-btn fade-btn">
					<image src="@/static/images/icon/camera.png"></image>
				</view>
				<view class="tips">
					<view>相关图片</view>
					<view>上传与您的宠物检查相关的图片</view>
				</view>
			</view>
		</view>
		
		<view class="choose-wrap">
			<view class="header">
				<view class="label">添加顾问<text>（可选）</text></view>
				<view class="change-btn fade-btn" v-if="currChooseDoctor"
				 @click="chooseDoctorPopup.show = true">更换</view>
			</view>
			<view class="item-wrap">
				<view class="item" v-if="currChooseDoctor">
					<image class="head-picture" src="@/static/images/a.jpg"></image>
					<view class="info">
						<view>{{ currChooseDoctor.name }}</view>
						<view>兽医顾问</view>
					</view>
				</view>
				<view class="item" v-else @click="chooseDoctorPopup.show = true">
					<view class="add-btn">
						<image src="@/static/images/icon/add-orange.png"></image>
					</view>
					<view class="tips">
						<view>HI,欢迎添加我</view>
						<view>选择你想要咨询的顾问</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="choose-wrap">
			<view class="header">
				<view class="label">添加爱宠<text>（可选）</text></view>
				<view class="change-btn fade-btn" v-if="currChoosePet"
				@click="choosePetPopup.show = true">更换</view>
			</view>
			<view class="item-wrap">
				<view class="item" v-if="currChoosePet">
					<image class="head-picture" src="@/static/images/a.jpg"></image>
					<view class="info">
						<view>{{ currChoosePet.name }}</view>
						<view>年龄：6岁</view>
					</view>
				</view>
				<view class="item" v-else @click="choosePetPopup.show = true">
					<view class="add-btn">
						<image src="@/static/images/icon/add-orange.png"></image>
					</view>
					<view class="tips">
						<view>选择爱宠</view>
						<view>选择你想要咨询的爱宠</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="bottom-wrap">
		<view class="consult-btn btn">咨询</view>
	</view>
	
	<!-- 选择医生弹窗 -->
	<slide-popup v-model="chooseDoctorPopup.show" :height="'55%'">
		<view class="choose-popup">
			<view class="header">
				<view>选择医生</view>
				<view>选择你要咨询的医生</view>
			</view>
			<view class="list">
				<view :class="['item', {'item-selected': index == chooseDoctorPopup.curr}]" 
				v-for="(item, index) in chooseDoctorPopup.list"
				@click="chooseDoctor(index)">
					<image class="head-picture" src="@/static/images/a.jpg"></image>
					<view class="info">
						<view>{{ item.name }}</view>
						<view>{{ item.job }}</view>
					</view>
					<view class="circle">
						<view></view>
					</view>
				</view>
			</view>
		</view>
	</slide-popup>
	
	<!-- 选择宠物弹窗 -->
	<slide-popup v-model="choosePetPopup.show" :height="'55%'">
		<view class="choose-popup">
			<view class="header">
				<view>选择宠物</view>
				<view>选择你的宠物</view>
			</view>
			<view class="list">
				<view :class="['item', {'item-selected': index == choosePetPopup.curr}]" 
				v-for="(item, index) in choosePetPopup.list"
				@click="choosePet(index)">
					<image class="head-picture" src="@/static/images/a.jpg"></image>
					<view class="info">
						<view>{{ item.name }}</view>
						<view>{{ item.age }}</view>
					</view>
					<view class="circle">
						<view></view>
					</view>
				</view>
			</view>
		</view>
	</slide-popup>
</view>
</template>

<script>
import SlidePopup from "@/components/slide-popup.vue"	
export default {
	data() {
		return {
			// 原因
			reason: "",
			// 选择医生弹窗
			chooseDoctorPopup: {
				show: false,
				curr: -1,
				list: [
					{ name: "王大夫", job: "兽医顾问" },
					{ name: "王美丽", job: "兽医顾问" }
				]
			},
			// 选择宠物弹窗
			choosePetPopup: {
				show: false,
				curr: -1,
				list: [
					{ name: "旺财", age: "1岁零3个月" },
					{ name: "阿福", age: "1岁零3个月" }
				]
			}
		}
	},
	computed: {
		// 当前选择宠物
		currChoosePet () {
			return this.choosePetPopup.list[this.choosePetPopup.curr]
		},
		// 当前选择医生
		currChooseDoctor () {
			return this.chooseDoctorPopup.list[this.chooseDoctorPopup.curr]
		}
	},
	methods: {
		// 选择宠物
		choosePet (index) {
			this.choosePetPopup.curr = index
			this.choosePetPopup.show = false
		},
		// 选择宠物
		chooseDoctor (index) {
			this.chooseDoctorPopup.curr = index
			this.chooseDoctorPopup.show = false
		}
	},
	components: {
		SlidePopup
	}
	
}
</script>

<style lang="less">
.consult-main {
	display: flex;
	flex-direction: column;
	
	.top-container {
		flex: 1;
		overflow-y: auto;
		
		.label {
			font-weight: 700;
			font-size: 28rpx;
			color: #112950;
			
			>text {
				font-weight: 400;
				font-size: 24rpx;
				color: #A8A8A8;
			}
		}
		
		.reason-wrap {
			padding: 32rpx 40rpx 36rpx;
			border-bottom: 1rpx solid #E8E8E8;
			
			.input-wrap {
				margin-top: 24rpx;
				height: 254rpx;
				border-radius: 20rpx;
				display: flex;
				flex-direction: column;
				border: 1rpx solid #E5E5E5;
				padding: 20rpx 32rpx 16rpx;
				
				>textarea {
					flex: 1;
					font-size: 28rpx;
					letter-spacing: 0px;
				}
				
				.reason-input-placeholder {
					color: #B2BAC6;
				}
				
				.word-count {
					margin-top: 10rpx;
					text-align: right;
					font-size: 28rpx;
					line-height: 48rpx;
					color: #8E9AAB;
				}
			}
			
			.image-upload-wrap {
				display: flex;
				align-items: center;
				margin-top: 24rpx;
				gap: 24rpx;
				
				.upload-btn {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 196rpx;
					height: 144rpx;
					border-radius: 24rpx;
					border: 1rpx solid #E5E5E5;
					
					>image {
						width: 44rpx;
						height: 44rpx;
					}
				}
				
				.tips {
					flex: 1;
					
					>view {
						&:nth-child(1) {
							font-size: 28rpx;
							line-height: 36rpx;
							color: #112950;
						}
						
						&:nth-child(2) {
							margin-top: 8rpx;
							font-size: 24rpx;
							line-height: 36rpx;
							color: #B2BAC6;
						}
					}
				}
			}
		}
		
		.choose-wrap {
			margin-top: 14rpx;
			padding: 22rpx 40rpx;
			
			.header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.change-btn {
					font-size: 24rpx;
					color: #FF6D03;
				}
			}
			
			.item-wrap {
				margin-top: 24rpx;
				height: 136rpx;
				border-radius: 20rpx;
				padding: 20rpx 30rpx;
				background: #F9F9F9;
				
				.item {
					display: flex;
					align-items: center;
					gap: 48rpx;
					
					.add-btn, .head-picture {
						width: 96rpx;
						height: 96rpx;
						border-radius: 100%;
					}
					
					.add-btn {
						display: flex;
						justify-content: center;
						align-items: center;
						background: #FFFFFF;
						border: 1rpx solid #E5E5E5;
						
						>image {
							width: 28rpx;
							height: 28rpx;
						}
					}
					
					.tips, .info {
						flex: 1;
						
						>view {
							&:nth-child(1) {
								font-size: 28rpx;
								line-height: 36rpx;
								color: #393938;
							}
							
							&:nth-child(2) {
								margin-top: 12rpx;
								font-size: 24rpx;
								line-height: 30rpx;
								color: #99A3B2;
							}
						}
					}
				}
			}
		}
	}
	
	.bottom-wrap {
		padding: 25rpx 30rpx;
		
		.consult-btn {
			height: 110rpx;
			background: #FF6D03;
			border-radius: 12rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}
	
	.choose-popup {
		display: flex;
		flex-direction: column;
		padding: 35rpx 48rpx;
		height: 100%;
		
		.header {
			text-align: center;
			
			>view {
				&:nth-child(1) {
					font-size: 48rpx;
					line-height: 64rpx;
					color: #112950;
				}
				
				&:nth-child(2) {
					margin-top: 4rpx;
					font-size: 30rpx;
					line-height: 44rpx;
					color: #B2BAC6;
				}
			}
		}
		
		.list {
			margin-top: 40rpx;
			flex: 1;
			overflow-y: auto;
			
			.item {
				margin-top: 40rpx;
				height: 224rpx;
				padding: 0 40rpx;
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				gap: 32rpx;
				box-sizing: border-box;
				border: 1rpx solid #DCDCDC;
				transition: .2s;
				
				.head-picture {
					width: 144rpx;
					height: 144rpx;
					border-radius: 100%;
				}
				
				.info {
					flex: 1;
					
					>view {
						&:nth-child(1) {
							font-size: 34rpx;
							line-height: 44rpx;
							color: #112950;
						}
					
						&:nth-child(2) {
							margin-top: 12rpx;
							font-size: 24rpx;
							line-height: 36rpx;
							color: #B2BAC6;
						}
					}
				}
				
				.circle {
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 100%;
					transition: .2s;
					width: 22rpx;
					height: 22rpx;
					border: 1rpx solid #BCBCBC;
					
					>view {
						border-radius: 100%;
						width: 10rpx;
						height: 10rpx;
						opacity: 1;
						background: #FFFFFF;
					}
				}
			}
			
			.item-selected {
				border-color: #FF6D03;
				
				.circle {
					border: 1rpx solid #FF6D03;
					
					>view {
						background: #FF6D03;
					}
				}
			}
		}
	}
}
</style>
